// 表单组件
<template>
<div>
  <el-row>
  <span class="info">说明：目前支持学科和关键字条件筛选</span>
  <el-button type="success" size="small " class="add" icon="el-icon-edit" @click="$router.push('/questions/new')" >新增试题</el-button>
  </el-row>
  <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px"  size="small ">

  <el-form-item label="学科" >
    <el-select v-model="formInline.subjectID" placeholder="请选择" @change="getSecondSubjectList">
      <el-option :label="item.label" :value="item.value" v-for="item in subjectList" :key="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="二级目录">
    <el-select v-model="formInline.catalogID" placeholder="请选择">
      <el-option :label="item.directoryName" :value="item.id" v-for="item in SecondSubject" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="标签">
    <el-select v-model="formInline.tags" placeholder="请选择">
      <el-option :value="item.value" :label="item.label" v-for="item in tags" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="关键字">
   <el-input v-model="formInline.keyWord" placeholder="根据题干搜索" class="input"></el-input>

  </el-form-item>
  <el-form-item label="试题类型">
    <el-select v-model="formInline.questionType" placeholder="请选择">
      <el-option :label="item.label" :value="item.value" v-for="item in questionTypeList" :key="item.value"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="难度">
    <el-select v-model="formInline.difficulty" placeholder="请选择">
      <el-option  :label="item.label" :value="item.value" v-for="item in difficultyList" :key="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="方向">
    <el-select v-model="formInline.direction" placeholder="请选择">
      <el-option :label="item" :value="item" v-for="item in directionList" :key="item"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="录入人" >
    <el-select v-model="formInline.creatorID" placeholder="活动区域" >
      <!-- ————————————————管理员为数字 -->
      <el-option label="超级管理员" value="2"></el-option>
      <el-option label="录入管理员" value="1"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="题目备注">
    <el-input v-model="formInline.remarks"  class="input"></el-input>
  </el-form-item>
  <el-form-item label="企业简称">
    <el-input v-model="formInline.shortName" class="input"></el-input>
  </el-form-item>
  <el-form-item label="城市">
    <el-col :span="12">
      <el-select v-model="formInline.province"  class="right" @change="getArea">
        <!-- 一级数据城市 -->
      <el-option :label="item" :value="item" v-for="item in cityList" :key="item"></el-option>
    </el-select>
    </el-col>
    <el-col :span="12">
      <!-- 二级数据相对应的地区 -->
     <el-select v-model="formInline.city" >
      <el-option :label="item" :value="item" v-for="item in areaList" :key="item"></el-option>

    </el-select>
    </el-col>
  </el-form-item>
    <el-form-item>
    <el-button class="position" @click="clear">清除</el-button>
    <el-button type="primary" class="position" @click="Submit">搜索</el-button>
    </el-form-item>
</el-form>
</div>
</template>

<script>
// simple学科简单列表，detail学科详情
import { simple } from '@/api/hmmm/subjects'
// 基础题库列表
import { list } from '@/api/hmmm/questions'
// 获取二级目录：通过学科ID获取
import { list as getdirectorysList } from '@/api/hmmm/directorys'
// 获得标签
import { simple as getTags } from '@/api/hmmm/tags'
// 枚举
import { questionTypes, difficulty, direction } from '@/api/hmmm/constants'
// 城市列表
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  data () {
    return {
      formInline: {
        // 一级目录id/int
        subjectID: '',
        // 二级目录/int
        catalogID: '',
        // 标签int
        tags: '',
        // 搜索题干/string
        keyWord: '',
        // 题型,后面搜索要枚举/sring
        questionType: '',
        // 难度，后面搜索要枚举/string
        difficulty: '',
        // 方向string
        direction: '',
        // 录入人int
        creatorID: '',
        // 题目备注string
        remarks: '',
        // 企业简介,string
        shortName: '',
        // 所有城市，string/省市
        province: '',
        // 相对应的地区,string
        city: '',
        // 当前页数
        page: 1,
        // 页数容量
        pagesize: 5
      },
      form: {
        date1: '',
        date2: ''
      },
      // 学科目录
      subjectList: [],
      // 二级目录
      SecondSubject: [],
      // 标签
      tags: [],
      // 题型
      questionTypeList: [],
      // 搜索
      difficultyList: [],
      // 方向
      directionList: [],
      // 城市
      cityList: [],
      // 对应地区
      areaList: [],
      // 基础题库的值,用于搜索后获得数据
      baseTable: [],
      // 总条数
      counts: 0
    }
  },
  methods: {
    // 封装获取下拉学科列表
    async getsubjectList () {
      // data数组包对象
      const { data } = await simple()
      // console.log(data, '学科列表')
      this.subjectList = data
    },
    // 获取二级目录、标签
    async getSecondSubjectList () {
      // 清空
      this.formInline.catalogID = []
      // 二级目录
      const { data } = await getdirectorysList({ subjectID: this.formInline.subjectID })
      // console.log(data, '二级目录')
      this.SecondSubject = data.items
      // 标签
      this.formInline.tags = ''
      const { data: data1 } = await getTags()
      this.tags = data1
      // console.log(data1, '标签')
    },
    // 封装基础题库试题类型/基础题库列表
    async getBaseList (form) {
      const { data } = await list(form)
      // console.log(data, '基础题库列表')
      // 总条数
      this.counts = data.counts
      this.baseTable = data.items
      // console.log(this.baseTable, 11112)
    },
    // 对应地区
    getArea () {
      // 对应地区初始化
      this.areaList = citys(this.formInline.province)
      // console.log(this.areaList)
    },
    // 表单置空
    clear () {
      this.formInline = {
        // 一级目录id/int
        subjectID: '',
        // 二级目录/int
        catalogID: '',
        // 标签int
        tags: '',
        // 搜索题干/string
        keyWord: '',
        // 题型,后面搜索要枚举/sring
        questionType: '',
        // 难度，后面搜索要枚举/string
        difficulty: '',
        // 方向string
        direction: '',
        // 录入人int
        creatorID: '',
        // 题目备注string
        remarks: '',
        // 企业简介,string
        shortName: '',
        // 所有城市，string/省市
        province: '',
        // 相对应的地区,string
        city: '',
        // 当前页数
        page: 1,
        // 页数容量
        pagesize: 5
      }
    },
    // 搜索
    async Submit () {
      await this.getBaseList(this.formInline)
      // 搜索基础题库列表，用于表格回显
      // console.log(this.baseTable, 'form')
      // 把获得的值传给兄弟组件
      this.$emit('form', this.baseTable, this.formInline)
      // this.$emit('data', this.formInline)
    }
  },
  async created () {
    // 学科
    await this.getsubjectList()
    await this.getBaseList()
    // console.log(this.directionList, 'fan')

    // 题型初始化
    this.questionTypeList = [...questionTypes]
    // 难度初始化
    this.difficultyList = [...difficulty]
    // 方向初始化
    this.directionList = [...direction]
    // 城市初始化
    this.cityList = provinces()
    // console.log(this.questionTypeList, 'questionTypeList')
    // 传值给父总共条数
    this.$emit('counts', this.counts)
  }
  // 表单组件把值传给兄弟组件

}

</script>

<style lang="scss" scoped >
.input {
  width: 200px;
}
.right {
  margin-right: 5px;
}
::v-deep .el-form-item__content {
  width: 200px;
}

.position{
  // 相对定位相对于自己之前的位置
  position: relative;
  left: 160px;
  top: 0;
}
::v-deep .el-row{
  position: relative;
  height: 32px;
  // background: green;
  margin-bottom: 20px;
}
.info {
    color: pink;
    position: absolute;
    left: 13px;
    top: 0;
    font-size: 12px;
  }
 .add{
    position: absolute;
    right: 10px;
    top: 0;
  }
</style>
